<html class="standard">

<head>
    <meta charset="utf-8">
    <title>客服聊天</title>
    <link href="../css/im_index/ly/c.css" type="text/css" rel="stylesheet">
    <link href="../css/im_index/ly/main.css" type="text/css" rel="stylesheet">
    <link href="../css/im_index/ly/prop-mall.css" type="text/css" rel="stylesheet">
    <link href="../css/framework/layui.css" type="text/css" rel="stylesheet">
</head>

<body>

    <div id="wrap">
        <div id="header">
            <div class="top">
                <ul class="layui-nav">
                    <div id="top" class="top-in">
                        <li class="layui-nav-item home">
                            <a href="../html/home.html" class="active">首页</a>
                        </li>
                        <li class="layui-nav-item message">
                            <a href="../html/chat.html" style="color:#22d7c6">消息</a>
                        </li>
                        <li class="layui-nav-item person; width:auto;">
                            <a href="../html/person.html">
                                <span>
                                    {{nickname}}
                                </span>
                                &nbsp;&nbsp;<img :src="avatarUrl" class="layui-nav-img"></a>
                        </li>
                        <li class="layui-nav-item">
                            <a href="" class="active" onclick="logout()">退出</a>
                        </li>
                </ul>

            </div>
        </div>

        <div id="main">
            <div id="container">
                <div class="chat-container page-container">
                    <div class="chat-wrap">
                        <div>
                            <div id="chat-user" class="chat-user">
                                <div class="article">30天内联系人</div>

                                <div id="user-list" class="user-list" style="background-color:	#FAFAFA">

                                    <ul id="general-list" v-for="user in userList">

                                        <li id="user" class="" @click="openWindow($event, user)">
                                            <div class="figure">
                                                <img :src="user.avatarUrl">
                                            </div>
                                            <div class="text">
                                                <div class="title"><span class="time">{{user.updatedTime}}</span>
                                                    <span class="name"> {{user.serviceName}} </span>
                                                    <span class="name" style="font-size:12.5px;color:gray">
                                                        {{user.shop}}</span>
                                                </div>
                                                <span class="notice-badge" v-if="user.count > 0">{{ user.count }}</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="chat-record" class="chat-record  ">

                            <div id="chatmain" class="chat-left " style="display: none ; ">
                                <div class="article">
                                    <span style="color:red"> {{serviceName}} </span>
                                    <span> {{status}} </span>
                                </div>
                                <div class="chat-position-bar" style=" ">
                                    <span class="bar-position-name"> {{shop}} </span>
                                </div>

                                <div id="chat" class="chat-message" style=" ">
                                    <ul id="im-list" class="im-list">


                                    </ul>
                                </div>



                                <div class="chat-im chat-editor" style="">

                                    <div style="width:100%;height:  100;">
                                        <textarea id="sendText" style="line-height: 1;width: 100%;height: 100%; resize: none;
                                            border: 1px solid white; ">{{sendText}}</textarea>
                                    </div>
                                    <div class="send" style="margin-top:8px;">
                                        <button class="layui-btn layui-btn-sm" style=" float:right;"
                                            @click="webSocketSendMessage()">发送</button>
                                    </div>


                                </div>

                            </div>
                            <div id="tips" class="tips" style="display: ;">
                                <p><b>Tips：</b>与您进行过沟通的客服都会在左侧列表中显示</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



        </div>
    </div>

    <script src="../js/framework/vue.js"></script>
    <script src="../js/framework/layui.js"></script>
    <script src="../js/framework/jquery-3.2.1.min.js"></script>
    <script src="../js/framework/stomp.min.js"></script>
    <script src="../js/framework/sockjs.min.js"></script>
    <script src="../js/im_index/commons.js"></script>
    <script src="../js/framework/bootstrap.min.js"></script>



    <script>
        checkRole(0)
        checkLogin()

        var aid = localStorage.getItem("aid");
        var account = localStorage.getItem("account");
        var role = localStorage.getItem("role");
        var serviceId = GetQueryString("serviceId");
        var userAvatarUrl = localStorage.getItem("avatarUrl");

        $(function () {

            // 个人信息初始化
            topinfo.nickname = localStorage.getItem("nickname");
            topinfo.avatarUrl = localStorage.getItem("avatarUrl");


            // 从消息过来的
            if (serviceId == null) {
                console.log("消息过来 " + 273)
                serviceList(aid)

            }
            // 从首页选择客服过来的
            else {
                console.log("首页选择客服过来 " + 276)
                newService(serviceId, aid)
                // 跳转过来的 窗口初始化
            }



            // 选择有新的客服
            // 获取聊天列表
            function newService(serviceId, aid) {
                console.log(serviceId + aid)
                url = "http://localhost:8080/chat/addService?aid=" + aid + "&serviceId=" + serviceId;
                console.log("选择有新的客服");
                $.ajax({
                    url: url,
                    type: 'get',
                    contentType: 'application/json; charset=UTF-8',
                    success: function (userList) {
                        console.log(userList)
                        userList.data.forEach(e => {
                            e.updatedTime = getMyDateMD(e.updatedTime);
                        });
                        chatlist.userList = userList.data;
                        jumpInit()
                    },
                    error: function () {
                        console.log("服务器获取失败");
                    }
                });


            }
            // 初始化  从跳转过来的打开新聊天窗口   
            function jumpInit() {
                $("#tips").css("display", "none")
                $("#chatmain").css("display", "")
                // chatmain.init(chatlist.userList[0]);
                // chatmain.webSocketClose();
                chatmain.initWebSocket(chatlist.userList[0]);
            }


            // 获取聊天列表
            // 从消息过来的
            function serviceList(aid) {
                url = "http://localhost:8080/chat/users/get?aid=" + aid
                $.ajax({
                    url: url,
                    type: 'get',
                    contentType: 'application/json; charset=UTF-8',
                    success: function (userList) {
                        console.log(userList)
                        userList.data.forEach(e => {
                            e.updatedTime = getMyDateMD(e.updatedTime);
                        });
                        chatlist.userList = userList.data;
                    },
                    error: function () {
                        console.log("服务器获取失败");
                    }
                });


            }



        });

        // 头条个人栏
        var topinfo = new Vue({
            el: '#top',
            data: {
                nickname: "",
                avatarUrl: ""
            },
            methods: {
                openChat: function (event, user) {

                },
            },
        });

        // 聊天
        var chatlist = new Vue({
            el: '#user-list',
            data: {
                userList: []
                // userList: [{
                //         serviceId: 123,
                //         avatarUrl: "../img/a.jpg",
                //         serviceName: "小天",
                //         shop: "京东1",
                //         count: 10
                //     },
                //     {
                //         serviceId: 13,
                //         avatarUrl: "../img/b.jpg",
                //         serviceName: "田",
                //         shop: "盛大1",
                //         count: 0
                //     }

                // ]
            },
            methods: {
                // 聊天列表的打开聊天
                openWindow: function (event, user) {
                    $("#tips").css("display", "none")
                    $("#chatmain").css("display", "")

                    $("#im-list").empty();
                    // 获取点击对象      
                    var el = event.currentTarget;


                    // chatmain.webSocketClose();
                    console.log(user)
                    chatmain.initWebSocket(user);
                    // 消息数量
                    user.count = 0;

                }



            }
        });



        
        // 聊天窗口
        var chatmain = new Vue({
            el: '#chatmain',
            data: {
                serviceName: "",
                status: "",
                shop: "",
                sendText: "",
                serviceId: "",
                ulid: "",
                webSocket: null,
                sendId: "",
                avatarUrl: "",
                message: [],
                offc:""
            },
            methods: {

                // 获取对方在线状态
                getStatus: function (serviceId) {
                    var upUserinfo = "http://localhost:8080/user/getStatus?receviId=" + serviceId;
                    $.get(upUserinfo, {
                    }, function (result) {
                        console.log(result)
                        chatmain.status = result.msg;
                    });

                },

                initWebSocket: function (user) {
                    // 窗口数据初始化
                    console.log(user.serviceName)
                    this.serviceName = user.serviceName;
                    this.shop = user.shop;
                    this.serviceId = user.serviceId;
                    this.avatarUrl = user.avatarUrl;
                    this.ulid = user.ulid;
                    this.offc = user.count;
                    this.sendId = aid;

                    // 获取对方在线状态
                    chatmain.getStatus(this.serviceId);

                    // 打开消息聊天WebSocket
                    this.webSocket = new WebSocket('ws://localhost:8080/chat/' + this.sendId + '/' + this
                        .ulid);
                    this.webSocket.onopen = function (event) {
                        console.log('WebSocket打开连接');

                        console.log('初始消息：%c' + event.data, 'color:green');
                        console.log(event);
                        console.log("=======");

                    };

                    /**
                     * 当服务端发来消息
                     */
                    this.webSocket.onmessage = function (event) {

                        console.log('WebSocket收到消息：%c' + event, 'color:green');
                        var message = JSON.parse(event.data)
                        console.log(message)

                        if (message.length != null) {
                            // console.log(message.length)
                            var c = 0;
                            message.forEach(m => {
                                c++;
                                 // 离线消息
                                // console.log(chatmain.offc)
                                // console.log(message.length +1-chatmain.offc)
                                if (chatmain.offc != 0 && c == message.length +1 - chatmain.offc) {
                                // console.log(c)
                                    $("#im-list").append('<hr style="font-size:5px">');
                                    $("#im-list").append('未读消息');
                                }
                                if (m.sendId != aid) {

                                    // 左
                                    // console.log(m.receiveId)
                                    $("#im-list").append(
                                        '<li style="margin-bottom: -25px;"><div class="message-text"><div class="figure"><img src=" ' +
                                        chatmain.avatarUrl +
                                        ' "></div><div class="text"><div><i class=" "></i>' +
                                        m.content + '</div></div></li>');
                                } else if (m.sendId == aid) {
                                    // console.log(m.sendId)
                                    $("#im-list").append(
                                        ' <li class=" " style="margin-bottom: -25px;"><div class=" " style="float:right;"><div class="text" style=""><i class=" "></i><p><span style="">' +
                                        m.content +
                                        ' </span></p></div><div class="figure"><!----><img src=" ' +
                                        userAvatarUrl +
                                        ' " class="float:right"></div></div></li>'
                                    );

                                }
                                // 时间转换
                                $("#im-list").append(
                                    ' <li class=" item-time"><span class=" time">' +
                                    getMyDate(m.sendTime) + '</span></li> <br>  ');
                            });
                        } else {
                            // console.log(message)
                            var m = message;
                            if (m.sendId != aid) {
                            $("#im-list").append('<label style="color:red;">新消息</label>');
                                $("#im-list").append(
                                    '<li style="margin-bottom: -25px;"><div class="message-text"><div class="figure"><img src=" ' +
                                    chatmain.avatarUrl +
                                    ' "></div><div class="text"><div><i class=" "></i>' +
                                    m.content + '</div></div></li>');
                            } else if (m.sendId == aid) {
                                $("#im-list").append(
                                    ' <li class=" " style="margin-bottom: -25px;"><div class=" " style="float:right;"><div class="text" style=""><i class=" "></i><p><span style="">' +
                                    m.content +
                                    ' </span></p></div><div class="figure"><!----><img src=" ' +
                                    userAvatarUrl + ' " class="float:right"></div></div></li>'
                                );

                            }
                            // 时间转换
                            $("#im-list").append(' <li class=" item-time"><span class=" time">' +
                                getMyDate(m.sendTime) + '</span></li> <br>  ');
                        }
                    };


                    /**
                     * 关闭连接
                     */
                    this.webSocket.onclose = function (event) {
                        console.log('WebSocket关闭连接');
                    };

                    /**
                     * 通信失败
                     */
                    this.webSocket.onerror = function (event) {
                        console.log('WebSocket发生异常');

                    };

                },
                webSocketSendMessage: function () {
                    this.webSocket.send(
                        JSON.stringify({
                            ulid: this.ulid,
                            receiveId: this.serviceId,
                            sendId: aid,
                            content: $("#sendText").val()
                        })

                    );
                    $("#sendText").val(null)
                },

                webSocketClose: function () {
                    if (this.webSocket != null) {
                        this.webSocket.onclose = function (event) {
                            console.log('WebSocket关闭连接');
                        };
                    }
                }

            }

        });


        var chat = new Vue({
            el: '#chat',
            data: {
                message: [],
            },
            methods: {
                webSocket: function (jsonStr) {



                }
            }
        });
    </script>

</body>

</html>